<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bilibili</title>
    <script src="./lib/scrollreveal/scrollreveal.min.js"></script>
    <link rel="stylesheet" href="./icon/iconfont.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/glide/glide.core.min.css">
    <link rel="stylesheet" href="./css/glide/glide.theme.min.css">
    <script src="./lib/anime.min.js"></script>

    <style>

    </style>
</head>

<body>
    <header>
        <div class="logo">什么科技</div>
        <nav>
            <a href="#about-us">关于我们</a>
            <a href="#show-cases">展示案例</a>
            <a href="#searve-process">服务流程</a>
            <a href="#team-introduction">团队介绍</a>
            <a href="#data-section">数据服务</a>
            <a href="#company-activise">公司活动</a>
            <i class="iconfont icon-sousuo"></i>
        </nav>
        <div class="mune">
            <div class="cross-bar"></div>
            <div class="cross-bar"></div>
            <div class="cross-bar"></div>
        </div>
    </header>
    <div class="glide">
        <div class="glide__track" data-glide-el="track">
            <ul class="glide__slides">
                <li class="glide__slide">
                    <div class="glide__caption">
                        <h1>科技改变世界</h1>
                        <h3>立足科技发展，着力自主创新。加速科技进步，为全市紧急发展提供有力支持，凝聚科技创意，成就创新梦想。</h3>
                        <button class="explore-btn">探索更多</button>
                    </div>
                    <div class="backdrop"></div>
                    <img src="./image/people-in-couch-1024248.jpg" alt="">
                </li>
                <li class="glide__slide">
                    <div class="glide__caption left">
                        <h1>科技改变世界</h1>
                        <h3>立足科技发展，着力自主创新。加速科技进步，为全市紧急发展提供有力支持，凝聚科技创意，成就创新梦想。</h3>
                        <button class="explore-btn">探索更多</button>
                    </div>
                    <div class="backdrop"></div>
                    <video src="./videos/working-man.mp4" autoplay muted loop></video>
                </li>
            </ul>
        </div>
        <div class="glide__arrows" data-glide-el="controls">
            <button class="glide__arrow glide__arrow--left" data-glide-dir="<">prev</button>
            <button class="glide__arrow glide__arrow--right" data-glide-dir=">">next</button>
        </div>
        <div class="glide__bullets" data-glide-el="controls[nav]">
            <button class="glide__bullet" data-glide-dir="=0"></button>
            <button class="glide__bullet" data-glide-dir="=1"></button>
        </div>
    </div>
    <div class="content-wrap">
        <section class="about-us" id="about-us">
            <h1 class="title1">关于我们</h1>
            <p class="intro">网络公司不仅仅是提供域名注册、空间租用、网站开发、网站建设与网络营销活动策划相关的企业组织</p>
            <div class="features">
                <div class="feature">
                    <span class="iconfont icon-xiangshangjiantou"></span>
                    <div class="feature-titl">品牌创意</div>
                    <div class="feature-content">为切设计独特的并能完美的呈现价值观的视觉</div>
                </div>
                <div class="feature">
                    <span class="iconfont icon-xiangshangjiantou"></span>
                    <div class="feature-titl">品牌创意</div>
                    <div class="feature-content">为切设计独特的并能完美的呈现价值观的视觉</div>
                </div>
                <div class="feature">
                    <span class="iconfont icon-xiangshangjiantou"></span>
                    <div class="feature-titl">品牌创意</div>
                    <div class="feature-content">为切设计独特的并能完美的呈现价值观的视觉</div>
                </div>
                <div class="feature">
                    <span class="iconfont icon-xiangshangjiantou"></span>
                    <div class="feature-titl">品牌创意</div>
                    <div class="feature-content">为切设计独特的并能完美的呈现价值观的视觉</div>
                </div>
                <div class="feature">
                    <span class="iconfont icon-xiangshangjiantou"></span>
                    <div class="feature-titl">品牌创意</div>
                    <div class="feature-content">为切设计独特的并能完美的呈现价值观的视觉</div>
                </div>
                <div class="feature">
                    <span class="iconfont icon-xiangshangjiantou"></span>
                    <div class="feature-titl">品牌创意</div>
                    <div class="feature-content">为切设计独特的并能完美的呈现价值观的视觉</div>
                </div>
            </div>

        </section>
        <section class="show-cases" id="show-cases">
            <h1 class="title1">展示案例</h1>
            <div class="filter-btns">
                <button class="filter-btn active" data-filter="*">全部</button>
                <button class="filter-btn" data-filter=".aaa">WEB</button>
                <button class="filter-btn" data-filter=".bbb">移动</button>
                <button class="filter-btn" data-filter=".ccc">科研</button>
            </div>
            <div class="cases">
                <div class="case-item qqq">
                    <img src="./image/person-using-black-and-white-smartphone-and-holding-blue-230544.jpg" alt="">
                </div>
                <div class="case-item qqq ccc aaa">
                    <img src="./image/photo-of-imac-near-macbook-1029757.jpg" alt="">
                </div>
                <div class="case-item  www qqq">
                    <img src="./image/person-using-black-and-white-smartphone-and-holding-blue-230544.jpg" alt="">
                </div>
                <div class="case-item www aaa eee">
                    <img src="./image/person-using-black-and-white-smartphone-and-holding-blue-230544.jpg" alt="">
                </div>
                <div class="case-item ccc qqq aaa">
                    <img src="./image/person-using-black-and-white-smartphone-and-holding-blue-230544.jpg" alt="">
                </div>
                <div class="case-item ccc aaa ddd">
                    <img src="./image/person-using-black-and-white-smartphone-and-holding-blue-230544.jpg" alt="">
                </div>
                <div class="case-item www ccc">
                    <img src="./image/person-using-black-and-white-smartphone-and-holding-blue-230544.jpg" alt="">
                </div>
                <div class="case-item aaa bbb ccc www ddd">
                    <img src="./image/person-using-black-and-white-smartphone-and-holding-blue-230544.jpg" alt="">
                </div>
            </div>
        </section>
        <section class="searve-process" id="searve-process">
            <h1 class="title1">展示案例</h1>
            <p class="intro">网络公司不仅仅是提供域名注册、空间租用、网站开发、网站建设与网络营销活动策划相关的企业组织</p>
            <div class="orders">
                <div class="order">
                    <span class="iconfont icon-xiangshangjiantou"></span>
                    <div class="order-title">需求沟通</div>
                    <div class="order-content">客户提出网站建设的基本需求，包括设计要求及功能要求</div>
                </div>
                <div class="order">
                    <span class="iconfont icon-xiangshangjiantou"></span>
                    <div class="order-title">需求沟通</div>
                    <div class="order-content">客户提出网站建设的基本需求，包括设计要求及功能要求</div>
                </div>
                <div class="order">
                    <span class="iconfont icon-xiangshangjiantou"></span>
                    <div class="order-title">需求沟通</div>
                    <div class="order-content">客户提出网站建设的基本需求，包括设计要求及功能要求</div>
                </div>
                <div class="order">
                    <span class="iconfont icon-xiangshangjiantou"></span>
                    <div class="order-title">需求沟通</div>
                    <div class="order-content">客户提出网站建设的基本需求，包括设计要求及功能要求</div>
                </div>
                <div class="order">
                    <span class="iconfont icon-xiangshangjiantou"></span>
                    <div class="order-title">需求沟通</div>
                    <div class="order-content">客户提出网站建设的基本需求，包括设计要求及功能要求</div>
                </div>
                <div class="order">
                    <span class="iconfont icon-xiangshangjiantou"></span>
                    <div class="order-title">需求沟通</div>
                    <div class="order-content">客户提出网站建设的基本需求，包括设计要求及功能要求</div>
                </div>
            </div>
        </section>
        <section class="team-introduction" id="team-introduction">
            <h1 class="title1">团队介绍</h1>
            <div class="numbers">
                <div class="number">
                    <div class="number-img">
                        <img src="./image/man-wearing-black-suit-2955376.jpg" alt="">
                    </div>
                    <div class="number-name">张紫琪</div>
                    <div class="number-info">前端工程师</div>
                    <div class="number-about">
                        <a href="javascript:;"><span class="iconfont icon-xiangshangjiantou"></span></a>
                        <a href="javascript:;"><span class="iconfont icon-xiangshangjiantou"></span></a>
                        <a href="javascript:;"><span class="iconfont icon-xiangshangjiantou"></span></a>
                        <a href="javascript:;"><span class="iconfont icon-xiangshangjiantou"></span></a>
                    </div>
                </div>
                <div class="number">
                    <div class="number-img">
                        <img src="./image/man-wearing-black-suit-2955376.jpg" alt="">
                    </div>
                    <div class="number-name">张紫琪</div>
                    <div class="number-info">前端工程师</div>
                    <div class="number-about">
                        <a href="javascript:;"><span class="iconfont icon-xiangshangjiantou"></span></a>
                        <a href="javascript:;"><span class="iconfont icon-xiangshangjiantou"></span></a>
                        <a href="javascript:;"><span class="iconfont icon-xiangshangjiantou"></span></a>
                        <a href="javascript:;"><span class="iconfont icon-xiangshangjiantou"></span></a>
                    </div>
                </div>
                <div class="number">
                    <div class="number-img">
                        <img src="./image/man-wearing-black-suit-2955376.jpg" alt="">
                    </div>
                    <div class="number-name">张紫琪</div>
                    <div class="number-info">前端工程师</div>
                    <div class="number-about">
                        <a href="javascript:;"><span class="iconfont icon-xiangshangjiantou"></span></a>
                        <a href="javascript:;"><span class="iconfont icon-xiangshangjiantou"></span></a>
                        <a href="javascript:;"><span class="iconfont icon-xiangshangjiantou"></span></a>
                        <a href="javascript:;"><span class="iconfont icon-xiangshangjiantou"></span></a>
                    </div>
                </div>
                <div class="number">
                    <div class="number-img">
                        <img src="./image/man-wearing-black-suit-2955376.jpg" alt="">
                    </div>
                    <div class="number-name">张紫琪</div>
                    <div class="number-info">前端工程师</div>
                    <div class="number-about">
                        <a href="javascript:;"><span class="iconfont icon-xiangshangjiantou"></span></a>
                        <a href="javascript:;"><span class="iconfont icon-xiangshangjiantou"></span></a>
                        <a href="javascript:;"><span class="iconfont icon-xiangshangjiantou"></span></a>
                        <a href="javascript:;"><span class="iconfont icon-xiangshangjiantou"></span></a>
                    </div>
                </div>

            </div>
        </section>
        <section class="data-section" id="data-section">
            <div class="data-price">
                <span class="iconfont icon-xiangshangjiantou"></span>
                <div class="data-num">156</div>
                <div class="data-desc">行代码</div>
            </div>
            <div class="data-price">
                <span class="iconfont icon-xiangshangjiantou"></span>
                <div class="data-num">156</div>
                <div class="data-desc">行代码</div>
            </div>
            <div class="data-price">
                <span class="iconfont icon-xiangshangjiantou"></span>
                <div class="data-num">156</div>
                <div class="data-desc">行代码</div>
            </div>
            <div class="data-price">
                <span class="iconfont icon-xiangshangjiantou"></span>
                <div class="data-num">156</div>
                <div class="data-desc">行代码</div>
            </div>

        </section>
        <section class="company-activise" id="company-activise">
            <h1 class="title1">关于我们</h1>
            <p class="intro">网络公司不仅仅是提供域名注册、空间租用、网站开发、网站建设与网络营销活动策划相关的企业组织</p>
            <div class="companys">
                <div class="company">
                    <div class="company-img">
                        <img src="./image/red-suspension-bridge-3493772.jpg" alt="">
                    </div>
                    <div class="company-timer">
                        <p>
                            <span class="iconfont icon-xiangshangjiantou"></span>
                            <span>2019年12月1日</span>
                        </p>
                        <p>
                            <span class="iconfont icon-xiangshangjiantou"></span>
                            <span>33条评论</span>
                        </p>
                    </div>
                    <div class="company-title">提供互联网介入的ISP公司</div>
                    <div class="company-content">
                        网络公司原本只的是提供网络服务的互联网内容提供商ICP公司，提供互联网介入的ISO公司，提供内容托管的IDS提供商，还有无线接入、万罗游戏、网络视频、网络培训、网络销售。
                    </div>
                    <a href="javascript:;">阅读更多</a>
                </div>
                <div class="company">
                    <div class="company-img">
                        <img src="./image/red-suspension-bridge-3493772.jpg" alt="">
                    </div>
                    <div class="company-timer">
                        <p>
                            <span class="iconfont icon-xiangshangjiantou"></span>
                            <span>2019年12月1日</span>
                        </p>
                        <p>
                            <span class="iconfont icon-xiangshangjiantou"></span>
                            <span>33条评论</span>
                        </p>
                    </div>
                    <div class="company-title">提供互联网介入的ISP公司</div>
                    <div class="company-content">
                        网络公司原本只的是提供网络服务的互联网内容提供商ICP公司，提供互联网介入的ISO公司，提供内容托管的IDS提供商，还有无线接入、万罗游戏、网络视频、网络培训、网络销售。
                    </div>
                    <a href="javascript:;">阅读更多</a>
                </div>
                <div class="company">
                    <div class="company-img">
                        <img src="./image/red-suspension-bridge-3493772.jpg" alt="">
                    </div>
                    <div class="company-timer">
                        <p>
                            <span class="iconfont icon-xiangshangjiantou"></span>
                            <span>2019年12月1日</span>
                        </p>
                        <p>
                            <span class="iconfont icon-xiangshangjiantou"></span>
                            <span>33条评论</span>
                        </p>
                    </div>
                    <div class="company-title">提供互联网介入的ISP公司</div>
                    <div class="company-content">
                        网络公司原本只的是提供网络服务的互联网内容提供商ICP公司，提供互联网介入的ISO公司，提供内容托管的IDS提供商，还有无线接入、万罗游戏、网络视频、网络培训、网络销售。
                    </div>
                    <a href="javascript:;">阅读更多</a>
                </div>
            </div>
        </section>
    </div>
    <footer>
        <div class="footer-munes">
            <div class="service-mune contect-mune">
                <p>联系我们</p>
                <p>地址：中国水电费第三方的撒范德萨发</p>
                <p>电话：18235274237</p>
                <p>传真：——123214324 2</p>
                <p>电子邮箱：1003312535@qq.com</p>
            </div>
            <div class="service-mune">
                <p>服务概括</p>
                <p><a href="javascript:;">网站建设</a></p>
                <p><a href="javascript:;">域名购买</a></p>
                <p><a href="javascript:;">网页设计</a></p>
                <p><a href="javascript:;">移动应用</a></p>
            </div>
            <div class="service-mune">
                <p>服务概括</p>
                <p><a href="javascript:;">网站建设</a></p>
                <p><a href="javascript:;">域名购买</a></p>
                <p><a href="javascript:;">网页设计</a></p>
                <p><a href="javascript:;">移动应用</a></p>
            </div>
            <div class="service-mune">
                <p>服务概括</p>
                <p><a href="javascript:;">网站建设</a></p>
                <p><a href="javascript:;">域名购买</a></p>
                <p><a href="javascript:;">网页设计</a></p>
                <p><a href="javascript:;">移动应用</a></p>
            </div>
            <div class="service-mune">
                <p>服务概括</p>
                <p><a href="javascript:;">网站建设</a></p>
                <p><a href="javascript:;">域名购买</a></p>
                <p><a href="javascript:;">网页设计</a></p>
                <p><a href="javascript:;">移动应用</a></p>
            </div>
            <p class="qwe">万恶回复撒旦画佛山大范德萨方式</p>
            <p class="asd">万恶回复撒旦画佛山大范德萨方式爱我答复让对方大师傅阿斯顿发送到</p>
        </div>
        <div class="black">
            <a href="#"> <span class="iconfont icon-xiangshangjiantou"></span></a>
        </div>
    </footer>

    <script src="./lib/isotope/isotope.pkgd.min.js"></script>
    <script src="./lib/glide/glide.min.js"></script>
    <script src="./lib/anime/anime.min.js"></script>
    <script src="./js/index.js"></script>
    <script>
        
    </script>
</body>

</html>